
<script setup lang="ts">
import { getCurrentInstance, onMounted, onBeforeUnmount, ComponentInternalInstance } from "vue"
import decorationV1 from "comps/decoration/decoration-nymo-v1.vue";
import decorationV3 from "comps/decoration/decoration-nymo-v3.vue";
import { options } from "./configs/options";


// this
const instance: ComponentInternalInstance | null = getCurrentInstance();
let _this: any = instance ? instance.appContext.config.globalProperties : null;

// ref
let charts: Array<Object> = [];

// init the echarts
const initCharts: Function = (): void => {
  for (let i = 1; i < 8; i++) {
    let example = document.getElementById(`chart${i}`);
    charts.push(echarts['init'](example))
  }
}

const setOptions: Function = (): void => {
  charts.forEach((item, index) => {
    options[index] && item['setOption'](options[index]);
  })
}

// resize/refresh the charts
const resizeCharts: Function = (): void => {
  charts.forEach((item) => {
    item['resize']()
  })
}

// instance ResizeObserver
const myObserver: ResizeObserver = new ResizeObserver((): void => {
  resizeCharts()
})

// onMounted
onMounted((): void => {

  // 实例化
  initCharts();

  // 载入选项
  setOptions();

  // set event listener

  const screen: HTMLElement | null = document.getElementById("bigScreen")
  if (screen instanceof HTMLElement) myObserver.observe(screen);

})

// onBeforeUnmount
onBeforeUnmount((): void => {

  // remove event listener
  const screen: HTMLElement | null = document.getElementById("bigScreen")
  if (screen instanceof HTMLElement) myObserver.unobserve(screen);

  // dispose the charts object
  charts.forEach((item) => {
    item['dispose']();
  })
})

// Exportation
defineExpose({
})
</script>


<template>
  <div id="bigScreen" refs="bigScreen">
    <div class="screen">
      <decorationV3 />
    </div>

    <!-- Chart1：  -->
    <div class="wrapper-left-top">
      <decorationV1>
        <template v-slot:icon>
          <svg-icon name="email" class="mini-icon"></svg-icon>
        </template>
        <template v-slot:chart>
          <div id="chart1" ref="chart1"></div>>
        </template>
      </decorationV1>
    </div>

    <!-- Chart2：  -->
    <div class="wrapper-left-bottom">
      <decorationV3>
        <template v-slot:chart>
          <div id="chart2" ref="chart2"></div>>
        </template>
      </decorationV3>
    </div>

    <!-- Chart3：  -->
    <div class="wrapper-middle-top">
      <decorationV3>
        <template v-slot:chart>
          <div id="chart3" ref="chart3"></div>>
        </template>
      </decorationV3>
    </div>

    <!-- Chart4：  -->
    <div class="wrapper-middle-bottom">
      <decorationV3>
        <template v-slot:chart>
          <div id="chart4" ref="chart4"></div>>
        </template>
      </decorationV3>
    </div>

    <!-- Chart5：  -->
    <div class="wrapper-right-top">
      <decorationV1>
        <template v-slot:icon>
          <svg-icon name="email" class="mini-icon"></svg-icon>
        </template>
        <template v-slot:chart>
          <div id="chart5" ref="chart5"></div>>
        </template>
      </decorationV1>
    </div>

    <!-- Chart6：  -->
    <div class="wrapper-right-middle">
      <decorationV1>
        <template v-slot:icon>
          <svg-icon name="email" class="mini-icon"></svg-icon>
        </template>
        <template v-slot:chart>
          <div id="chart6" ref="chart6"></div>>
        </template>
      </decorationV1>
    </div>

    <!-- Chart7：  -->
    <div class="wrapper-right-bottom">
      <decorationV1>
        <template v-slot:icon>
          <svg-icon name="email" class="mini-icon"></svg-icon>
        </template>
        <template v-slot:chart>
          <div id="chart7" ref="chart7"></div>>
        </template>
      </decorationV1>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
@import "./configs/charts.scss";
$headH: 2.5rem;

#bigScreen {
  width: 100%;
  height: 100%;
  position: relative;
  flex-wrap: nowrap;
  // @include flex-row-center-center
}
.screen {
  width: 99%;
  height: 98%;
  position: absolute;
  left: 0.5%;
  top: 1%;
  background: rgba($color: #000000, $alpha: 0.5);
}
.wrapper-left-top {
  position: absolute;
  width: 25.5%;
  height: 30%;
  top: 5%;
  left: 3%;
}
.wrapper-left-bottom {
  position: absolute;
  width: 25.5%;
  height: 59.5%;
  top: calc(5% + 30% + 0.5%);
  left: 3%;
}
.wrapper-middle-top {
  position: absolute;
  width: 50%;
  height: 58%;
  top: 5%;
  left: calc(3% + 25% + 0.5%);
}
.wrapper-middle-bottom {
  position: absolute;
  width: 68.5%;
  height: 31.5%;
  top: calc(5% + 58% + 0.5%);
  left: calc(3% + 25% + 0.5%);
}
.wrapper-right-top {
  position: absolute;
  width: 18.5%;
  height: 19%;
  top: 5%;
  left: calc(3% + 25% + 50% + 0.5%);
}
.wrapper-right-middle {
  position: absolute;
  width: 18.5%;
  height: 19%;
  top: calc(5% + 19% + 0.5%);
  left: calc(3% + 25% + 50% + 0.5%);
}

.wrapper-right-bottom {
  position: absolute;
  width: 18.5%;
  height: 19%;
  top: calc(5% + 38% + 1%);
  left: calc(3% + 25% + 50% + 0.5%);
}
</style>
